<template>
	<div class="upshop">
		<h1>商品添加</h1>

		<div class="upxx">
			<img :src="`${$ip}/api/public/showimg/${img}`" style="	width: 400px;
		height: 350px;
		position: relative;
		left: -300px;
		top: 50px;" min-width="70" height="70" />

			<el-form label-width="80px">
				<el-form-item label="商品名称:">
					<el-input v-model="book.name"></el-input>
				</el-form-item>
				<el-form-item label="商品序号:">
					<el-input v-model="book.sn"></el-input>
				</el-form-item>
				<el-form-item label="商品价格:">
					<el-input v-model="book.price"></el-input>
				</el-form-item>

				<el-form-item label="商品厂商:">
					<el-input v-model="book.maker"></el-input>
				</el-form-item>
				<el-form-item label="书籍作者:">
					<el-input v-model="book.author"></el-input>
				</el-form-item>
				<el-form-item label="出厂时间:">
					<el-input type="date" v-model="book.date"></el-input>
				</el-form-item>
				<el-form-item label="商品库存:">
					<el-input v-model="book.stock"></el-input>
				</el-form-item>

				<el-form-item label="商品类型:">
					<el-cascader :props="defaultParams" :options="options" v-model="pp" :key="keyValue"
						:clearable="true"></el-cascader>
				</el-form-item>
				<el-form-item label="商品详情:">
					<el-input type="textarea" v-model="book.info"></el-input>
				</el-form-item>
				<el-form-item label="操作:">
					<el-button @click="bc()">保存</el-button>
				</el-form-item>
			</el-form>
		</div>
		<el-upload class="avatar-uploader" :multipe="false" :show-file-list="true" :auto-upload="false"
			:before-upload="beforeAvatarUpload" :file-list="fileList" :on-change="handleChange" action="uploadAction"
			list-type="picture" accept="image/jpg,image/jpeg">
			<h4>选择头像图片</h4>
		</el-upload>
	</div>
</template>

<script>
	export default {
		name: 'endbackupdateshop',
		data() {
			return {
				fileList: [],
				options: [],
				pp: [],
				book: {},
				one: [],
				two: [],
				defaultParams: {
					label: 'name',
					value: 'id',
					children: 'children'
				},
				img: '',
				keyValue: 0
			}
		},
		watch: {
			options(newVal) {
				this.keyValue++ //监听到数据源发生变化 ，改变keyValue的值，达到重新渲染的效果
			}
		},
		methods: {

			handleChange: function(file, fileList) {
				this.fileList = fileList;
			},

			beforeAvatarUpload(file) {
				const isJPG = file.type === 'image/jpeg';
				const isLt2M = file.size / 1024 / 512;

				if (!isJPG) {
					this.$message.error('上传图片只能是 JPG 格式!');
				}
				if (!isLt2M) {
					this.$message.error('上传图片大小不能超过 0.5MB!');
				}
				return isJPG && isLt2M;
			},
			bc() {
				console.log("选择器的值" + this.pp);
				let arr = [];
				arr = this.pp;
				// let kk = this.pp.split(",")
				console.log(arr[1]);
				let formData = new FormData();
				formData.append("mypic", this.fileList[0].raw);
				formData.append("id", 0);
				formData.append("name", this.book.name);
				formData.append("sn", this.book.sn);
				formData.append("price", this.book.price);
				formData.append("maker", this.book.maker);
				formData.append("tmake", this.book.date);
				formData.append("author", this.book.author);
				formData.append("stock", this.book.stock);
				formData.append("info", this.book.info);
				formData.append("salenum", 20);
				formData.append("type.id", arr[1]);
				this.$postf('/api/adm/book/add', formData).then((resp) => {
					console.log(resp.data.data);
				})
			}
		},
		mounted() {
			console.log(this.$route.query.name);

			this.$get("/api/adm/type/findAll2").then((resp) => {
				console.log(resp.data.data);
				let list = resp.data.data;
				console.log(list);
				list.forEach((item, i) => {
					console.log(item.prio);
					if (item.prio < 10000) {
						this.one.push(item);
					} else {
						this.two.push(item)
					}
				})

				console.log("一级类型:" + this.one);
				this.one.forEach((item, i) => {

					console.log(item.name);
					this.options.push(item);

				});
				console.log("====================================");
				this.options.forEach((item, i) => {
					console.log(item.id + item.name);
					item.children = [];
					this.two.forEach((itemm, j) => {
						if (item.id == itemm.pid) {
							item.children.push(itemm);
						}

					})
				})

				console.log("====================================");
				for (let i in this.options) {

					for (let j of this.options[i].children) {
						// console.log(this.bigList[i].son.[j].name);

						console.log(this.options[i].name + j.name);

					}
				}
				console.log("打印数组+++++++++++++++++++++++++++++++++++++++");
				console.log(this.options);

			});

		}
	}
</script>

<style>
	.upshop {

		width: 80%;
		margin: 0 auto;
		text-align: center;
		font-family: KaiTi;
	}

	.upshop h1 {
		margin-top: 10px;
	}

	.upshop img {
		width: 400px;
		height: 350px;
		position: relative;
		left: -300px;
		top: 50px;
	}

	.upxx {
		width: 80%;

	}

	.upshop h4 {
		position: relative;
		top: -500px;
		left: -600px;
	}

	.upxx form {
		width: 50%;
		position: relative;
		left: 50%;
		top: -300px;
	}
</style>